<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{width:100px;height:100px;background:red;position: absolute;left:0;top:0;}
        .box2{width:100px;height:100px;background:green;position: absolute;left:0;top:110px;}
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
<script>
    function Drag(ele){
        this.ele = ele;
        this.m = this.move.bind(this);
        this.u = this.up.bind(this);
    }
    Drag.prototype.init = function(){
        this.addEvent();
    }
    Drag.prototype.addEvent = function(){
        this.ele.addEventListener("mousedown", this.down.bind(this));
    }
    Drag.prototype.down = function(eve){
        this.downE = eve || window.event;
        document.addEventListener("mousemove", this.m);
        document.addEventListener("mouseup", this.u);
    }
    Drag.prototype.move = function(eve){
        this.moveE = eve || window.event;
        this.ele.style.left = this.moveE.pageX - this.downE.offsetX + "px";
        this.ele.style.top = this.moveE.pageY - this.downE.offsetY + "px";
    }
    Drag.prototype.up = function(eve){
        document.removeEventListener("mousemove", this.m);
        document.removeEventListener("mouseup", this.u);
    }

    const box1 = document.querySelector(".box1")
    const box2 = document.querySelector(".box2")
    
    const d1 = new Drag(box1);
    d1.init();


    function CreateExtend(){
        const arg = [...arguments];
        const arr = arg.slice(1);
        function Child(){
            arg[0].call(this, ...arr)
        }
        Child.prototype = new arg[0];
        return Child;
    }

    // 利用自定义封装的继承工具，将Drag作为父类，继承出SmallDrag子类
    const SmallDrag = CreateExtend(Drag, box2);
    // 修改子类原型的方法
    SmallDrag.prototype.move = function(abc){
        this.moveE = abc || window.event;
        let l = this.moveE.pageX - this.downE.offsetX;
        let t = this.moveE.pageY - this.downE.offsetY;
        
        if(l<0) l=0;
        if(t<0) t=0;
        
        this.ele.style.left = l + "px";
        this.ele.style.top = t + "px";
    }
    // 根据子类创建子类的实例
    const d2 = new SmallDrag();
    // 执行实例的初始化功能
    d2.init();
    
    
    


</script>
</html>